<template>
  <div class="border-line card">
    <header-title :title="totalPeople" @fullScreen="handleFullScreen"></header-title>
    <div @mouseenter="clearAutoPlay" @mouseleave="setAutoPlay">
      <echarts-view ref="echarts" class="card-content" :options="option" height="260px"></echarts-view>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
// import * as echarts from 'echarts'
import axios from 'axios'
export default {
  props: {
    areaID: {
      type: Number,
      default: 0
    },
    isFullscren: {
      type: Boolean,
      default: false
    }
  },
  components: {
    headerTitle,
    echartsView
  },
  data () {
    return {
      autoPlayer: null,
      totalPeople: '',
      option: {}
    }
  },
  mounted () {
    this.fetchData()
  },
  watch: {
    areaID: function (newVal, oldVal) {
      this.fetchData()
    }
  },
  methods: {
    fetchData () {
      axios.get(`http://222.85.201.111:8026/api/statistics/Get_KB_BZFSFX?RegionNo=${this.areaID}`).then((response) => {
        const xAxisData = []
        const btbzData = []
        const lhbzData = []
        const swbzData = []
        const zbzData = []
        const {
          data: { DATA: res, Total }
        } = response
        this.totalPeople = `保障方式分析（全市保障总户数${Total}户）`
        res.forEach((e) => {
          const { BTBZHS, LHBZHS, SWBZHS, ZBZHS, simname, name } = e
          xAxisData.push(this.isFullscren && this.areaID !== 0 ? name : simname)
          btbzData.push(BTBZHS)
          lhbzData.push(LHBZHS)
          swbzData.push(SWBZHS)
          zbzData.push(ZBZHS)
        })
        const barWidth = 40
        this.option = {
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(44, 222, 221, 1)' }, // 设置颜色渐变
                { offset: 1, color: 'rgba(8, 149, 224, 1)' }
              ]
            },
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(200, 53, 38, 1)' },
                { offset: 1, color: 'rgba(242, 88, 73, 1)' }
              ]
            },
            'rgba(255, 238, 10, 1)'
          ],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },
            formatter: (params, ticket, callback) => {
              return `<div>
                <div style="margin-bottom: 6px">${params[1].name}</div>
                <div style="margin-bottom: 6px">${params[1].marker}&nbsp;${params[1].seriesName}&nbsp;&nbsp;&nbsp;&nbsp;${params[1].value}</div>
                <div style="margin-bottom: 6px">${params[4].marker}&nbsp;${params[4].seriesName}&nbsp;&nbsp;&nbsp;&nbsp;${params[4].value}</div>
                <div style="margin-bottom: 6px">${params[7].marker}&nbsp;${params[7].seriesName}&nbsp;&nbsp;&nbsp;&nbsp;${params[7].value}</div>
                <div style="margin-bottom: 0">${params[10].marker}&nbsp;${params[10].seriesName}&nbsp;&nbsp;&nbsp;&nbsp;${params[10].value}</div>
              </div>`
            }
          },
          legend: {
            top: 0,
            left: 0,
            bottom: 10,
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            left: 0,
            right: 0,
            top: 40,
            bottom: '3%',
            containLabel: true
          },
          yAxis: [
            {
              type: 'value',
              splitNumber: 4,
              axisTick: {
                // 刻度线
                show: false
              },
              axisLine: {
                show: false
              },
              splitLine: {
                // 网格线
                show: false,
                lineStyle: {
                  type: 'dashed',
                  color: 'rgba(127, 214, 255, 1)'
                }
              }
            },
            {
              type: 'value',
              axisTick: {
                // 刻度线
                show: false
              },
              axisLine: {
                show: false
              },
              splitLine: {
                // 网格线
                show: false
              }
            }
          ],
          xAxis: [
            {
              type: 'category',
              axisTick: {
                show: false
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: 'rgba(0,228,255,1)'
                }
              },
              axisLabel: {
                inside: false,
                textStyle: {
                  color: '#fff',
                  fontWeight: 'normal',
                  fontSize: 12
                },
                margin: 20 // 刻度标签与轴线之间的距离。
              },
              data: xAxisData
            },
            {
              type: 'category',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              splitArea: {
                show: false
              },
              splitLine: {
                show: false
              },
              data: xAxisData
            }
            // {
            //   type: 'category',
            //   data: xAxisData,
            //   axisTick: {
            //     // 刻度线
            //     show: false
            //   },
            //   axisLine: {
            //     // 坐标轴
            //     show: false
            //   },
            //   splitLine: {
            //     // 网格线
            //     show: false
            //   }
            // }
          ],
          animation: false,
          series: [
            // 头
            {
              name: '总保障户数',
              type: 'pictorialBar',
              symbolSize: [barWidth, 10],
              symbolOffset: [-96, -5],
              symbolPosition: 'end',
              z: 15,
              color: '#1761BF',
              zlevel: 2,
              data: zbzData,
              label: {
                show: false,
                position: 'top',
                formatter: '{c} 户',
                color: '#fff',
                fontSize: 16,
                offset: [-96, 0]
              }
            },
            // 中间
            {
              name: '总保障户数',
              type: 'bar',
              barGap: '60%',
              barWidth: barWidth,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#1761BF'
                    },
                    {
                      offset: 1,
                      color: '#1761BF'
                    }
                  ]
                },
                borderColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#1761BF'
                    },
                    {
                      offset: 1,
                      color: '#1761BF'
                    }
                  ]
                },
                borderWidth: 1,
                borderType: 'solid'
              },
              zlevel: 2,
              data: zbzData
            },
            // 尾部
            {
              name: '总保障户数',
              type: 'pictorialBar',
              symbolSize: [barWidth, 10],
              symbolOffset: [-96, 5],
              z: 12,
              color: '#1761BF',
              data: zbzData
            },
            // 头
            {
              name: '实物保障户数',
              type: 'pictorialBar',
              symbolSize: [barWidth, 10],
              symbolOffset: [-32, -5],
              symbolPosition: 'end',
              z: 15,
              color: '#1491BD',
              zlevel: 2,
              data: swbzData,
              label: {
                show: false,
                position: 'top',
                formatter: '{c} 户',
                color: '#fff',
                fontSize: 16,
                offset: [-32, 0]
              }
            },
            // 中间
            {
              name: '实物保障户数',
              type: 'bar',
              barGap: '60%',
              barWidth: barWidth,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#1491BD'
                    },
                    {
                      offset: 1,
                      color: '#1491BD'
                    }
                  ]
                },
                borderColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#1491BD'
                    },
                    {
                      offset: 1,
                      color: '#1491BD'
                    }
                  ]
                },
                borderWidth: 1,
                borderType: 'solid'
              },
              zlevel: 2,
              data: swbzData
            },
            // 尾部
            {
              name: '实物保障户数',
              type: 'pictorialBar',
              symbolSize: [barWidth, 10],
              symbolOffset: [-32, 5],
              z: 12,
              color: '#1491BD',
              data: swbzData
            },
            // 头
            {
              name: '补贴保障户数',
              type: 'pictorialBar',
              symbolSize: [barWidth, 10],
              symbolOffset: [32, -5],
              symbolPosition: 'end',
              z: 15,
              color: '#28AEA7',
              zlevel: 2,
              data: btbzData,
              label: {
                show: false,
                position: 'top',
                formatter: '{c} 户',
                color: '#fff',
                fontSize: 16,
                offset: [32, 0]
              }
            },
            // 中间
            {
              name: '补贴保障户数',
              type: 'bar',
              barGap: '60%',
              barWidth: barWidth,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#28AEA7'
                    },
                    {
                      offset: 1,
                      color: '#28AEA7'
                    }
                  ]
                },
                borderColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#28AEA7'
                    },
                    {
                      offset: 1,
                      color: '#28AEA7'
                    }
                  ]
                },
                borderWidth: 1,
                borderType: 'solid'
              },
              zlevel: 2,
              data: btbzData
            },
            // 尾部
            {
              name: '补贴保障户数',
              type: 'pictorialBar',
              symbolSize: [barWidth, 10],
              symbolOffset: [32, 5],
              z: 12,
              color: '#28AEA7',
              data: btbzData
            },
            // 头
            {
              name: '轮候保障户数',
              type: 'pictorialBar',
              symbolSize: [barWidth, 10],
              symbolOffset: [96, -5],
              symbolPosition: 'end',
              z: 15,
              color: '#21A47A',
              zlevel: 2,
              data: lhbzData,
              label: {
                show: false,
                position: 'top',
                formatter: '{c} 户',
                color: '#fff',
                fontSize: 16,
                offset: [96, 0]
              }
            },
            // 中间
            {
              name: '轮候保障户数',
              type: 'bar',
              barGap: '60%',
              barWidth: barWidth,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#21A47A'
                    },
                    {
                      offset: 1,
                      color: '#21A47A'
                    }
                  ]
                },
                borderColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#21A47A'
                    },
                    {
                      offset: 1,
                      color: '#21A47A'
                    }
                  ]
                },
                borderWidth: 1,
                borderType: 'solid'
              },
              zlevel: 2,
              data: lhbzData
            },
            // 尾部
            {
              name: '轮候保障户数',
              type: 'pictorialBar',
              symbolSize: [barWidth, 10],
              symbolOffset: [96, 5],
              z: 12,
              color: '#21A47A',
              data: lhbzData
            }
          ],
          dataZoom: [
            {
              xAxisIndex: 0, // 这里是从X轴的0刻度开始
              show: false, // 是否显示滑动条，不影响使用
              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue: 0, // 从头开始。
              endValue: 3 // 一次性展示多少个。
            }
          ]
        }
        this.$nextTick(() => {
          this.setAutoPlay()
        })
      })
    },
    setAutoPlay () {
      this.clearAutoPlay('setAutoPlay')
      this.autoPlayer = setInterval(() => {
        if (this.option.dataZoom[0].endValue === 7) {
          this.option.dataZoom[0].endValue = 3
          this.option.dataZoom[0].startValue = 0
        } else {
          this.option.dataZoom[0].endValue = this.option.dataZoom[0].endValue + 1
          this.option.dataZoom[0].startValue = this.option.dataZoom[0].startValue + 1
        }
      }, 3000)
    },
    clearAutoPlay () {
      if (!this.$isEmpty(this.autoPlayer)) {
        clearInterval(this.autoPlayer)
      }
    },
    handleFullScreen () {
      this.$emit('fullScreen')
    }
  }
}
</script>
<style lang="less" scoped>
.card {
  height: 400px;
  &-content {
    margin-top: 10px;
  }
}
</style>
